import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    //先声明一个state变量 说白了就是放初始化状态用的
    state:{
        //订单
        order:{//订单
            "counter":1,
            "downmenu":1,
            "radios":1
        },
        //总价
        totalPrice:0
        
    },
    //声明完以后 我们要获取state里面的值 
    //this.store.state.order这种获取不太理想 我们用getters相当于computed来监听State值的变化
    getters:{
           getOrder(state){
               return state.order?state.order:{}
           },
           getTotalPrice(state){
               return state.totalPrice>0?state.totalPrice:0
           }
    },
     //改版state里面的值 我们这里做了处理
     mutations:{
         updateOrder(state,data){
            console.log(data);
            state.order[data[0]]=data[1];//左边的付给右边的
            console.log(data[0]);
            console.log(data[1]);
            //  state.order[data.key]=data.value
            // //这样做的话不合理因为data里面就一个数据，会把前面的数据给覆盖了
            //  state.order={
            //     "counter":data.counter,//5元
            //     "downmenu":data.downmenu,//1元
            //     "radios":data.radios//3元
            // }
         },
         updatePrice(state,price){
             state.totalPrice=price
         }
     },
     //用来异步操作mutations
     actions:{
         updateOrder(context,data){
             context.commit('updateOrder',data);
         },
         updatePrice(context,price){
             context.commit("updatePrice",price);
        }
     }
     //调用方法用this.$store.dispatch('',参数)
})